<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>插入和替换元素操作</title>
		<!-- 插入和替换元素操作：针对元素增删改操作
		 append()         功能：在匹配元素集合中所有元素的内部末尾插入内容
		 prepend()        功能：在匹配元素集合中所有元素的内部开头插入内容
		 
		 after()          功能：在匹配元素集合中所有元素的后边插入内容
		 before()         功能：在匹配元素集合中所有元素的前边插入内容
		 
		 remove()         功能：移除匹配元素集合中所有的元素和子元素【盒子模型都删掉】
		 empty()          功能：清空匹配元素集合中所有的元素的内容【盒子模型不删掉】
		 
		 replaceWith()
		 -->
		<style>
			button{
				margin: 5px;
				padding: 10px 15px;
				cursor: pointer;
			}
			body{
				margin: 20px;
			}
			#target{
				border: 1px solid #ebeec5;
				margin-left: 5px;
				padding: 10px;
				margin-top: 10px;
				border-radius: 5px;
			}
		
		</style>
		<script src="../js/jquery-1.11.1.js"></script>
	</head>
	<body>
		<!-- html：7个按钮   div包含p包含：目标元素的初始段落      id="target"
		                    div包含p包含：插入新元素的初始段落     id="newElemtnt"隐藏
		     css：按钮：外边距5px，内边距：10px 15px  鼠标移动上：手指显示
			      body：外边距20px
				  #target：像素边框、内边距：10px、上外边距：10px
			引入JQ
		 
		 -->
		 <button id="appendBtn">内部末尾插入元素</button>
		 		<button id="prependBtn">内部开头插入元素</button>
		 		<button id="afterBtn">外部后面插入元素</button>
		 		<button id="beforeBtn">外部前面插入元素 </button>
		 		<button id="removeBtn">删除元素</button>
		 		<button id="emptyBtn">清空元素</button>
		 		<button id="replaceBtn">替换元素</button>
		 		<!-- 目标显示区域 -->
		 		<div id="target">
		 			<p>目标元素的初始段落</p >
		 		</div>
		 		<!-- 用于插入和替换区域 -->
		 		<div id="newElement" style="display: none;">
		 			<p>插入新元素的初始段落</p >
		 		</div>
		 		<script>
		 			/* 1.点击  内部末尾插入元素 按钮 p文本后面追加新元素中包含内容操作 */
		 			$("#appendBtn").click(function(){
		 		   //效果：点击按钮  追加”新元素--自带内容“
		 			//1.1追加内容时新元素--克隆--html结构全部赋值出来，元素包含属性
		 			var cpe=$("#newElement").clone();
		 			//clone()创建一个元素的副本，副本包含：内部元素以及所有属性和属性值
		 			//1.2自带属性和属性值：隐藏--改成显示
		 			cpe.css("display","block");
		 			//1.3将复制出来的新元素，追加给当前元素上
		 		    $("#target").append(cpe);
		 			});
		 			
		 			/* 2. 点击  内部末尾插入元素 按钮 p文本后面追加新元素中包含内容操作*/
		 			$("#prependBtn").click(function(){
		 				var cpe=$("#newElement").clone();
		 				cpe.css("display","block");
		 				$("#target").prepend(cpe);
		 			});
		 			
		 			/* 3. 点击  外部后面插入元素 按钮 p文本后面追加新元素中包含内容操作*/
		 			$("#afterBtn").click(function(){
		 				var cpe=$("#newElement").clone();
		 				cpe.css("display","block");
		 				$("#target").after(cpe);
		 			});
		 			/* 4. 点击  外部前面插入元素 按钮 生成 圆形 保留背景色 文本不需要
		 			                                    背景图300*300*/
		 			$("#beforeBtn").click(function(){
		 				var cpe=$("#newElement").clone();
		 				
		 				cpe.css({"width":"300px",
		 				"height":"300px",
		 				"background":"#ffff7f",
		 				"border-radius":"50%",
		 				"background-image":"url(../img/123.png)",
		 				"background-size":"100% 100%",
		 				"color":"transparent",
		 				"display":"block",
		 				});
		 			$("#target").before(cpe);
		 			});				
					
					/* 5.点击删除元素  按钮  页面上所有元素包括子元素全部删除【盒子模型】 */			
					$("#removeBtn").click(function(){
						$("#target").remove();
					});
					/* 6.点击清空元素  按钮  页面上所有元素当中的内容全部删除 */
					$("#emptyBtn").click(function(){
						$("#target").empty();
					})
					/* 7.点击  替换元素  按钮  页面上目标元素替换为新元素 */
					$("#replaceBtn").click(function(){
						//克隆  新元素  #newElement【父子集】
						var c=$("#newElement").clone().css("display","block");
						//替换  新元素  替换 目标元素
						$("#target").replaceWith(c);
					});
		 		</script>
		 	</body>
		 </html>